<template>
  <div
    id="remote"
    class="main-div main-div-nopadding"
  >
    <el-container v-loading="remoteDeviceTreeLoading">
      <el-aside
        style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);"
        class="background-color-white"
      >
        <div class="aside-header-div">
          {{ $t('message.remote.header') }}
        </div>
        <div class="aside-tree-div">
          <el-tree
            style="height: 100%;padding-top: 5px;box-sizing: border-box"
            ref="deptTree"
            @node-click="handleTreeNodeClick"
            :data="remoteDeviceTree"
            :props="defaultTreeProps"
            node-key="node_key"
            default-expand-all
            highlight-current
            :expand-on-click-node="false"
          >
            <span
              style="flex: 1"
              slot-scope="{ node, data }"
            >
              <!--全网-->
              <span
                v-if="data.node_type === 'root'"
                class="custom-tree-node"
              >
                <span>
                  <img
                    class="tree-node-img"
                    src="@/assets/config/remote/qw.png"
                  >
                  {{ data.name }}
                </span>
                <span style="padding-right: 10px">
                  <el-button
                    v-if="$store.state.is_staff"
                    @click.stop="handleDeptCreate"
                    class="no-padding"
                    type="text"
                  >
                    {{ $t('message.remote.aside.addDeptButton') }}
                  </el-button>
                </span>
              </span>
              <!--部门-->
              <span
                v-if="data.node_type === 'dept'"
                class="custom-tree-node"
              >
                <span>
                  <img
                    class="tree-node-img"
                    src="@/assets/config/remote/dq.png"
                  >
                  {{ data.name }}
                </span>
                <span style="padding-right: 10px">
                  <el-dropdown v-if="$store.state.is_staff">
                    <span>
                      <i class="el-icon-arrow-down" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="handleDeptCreate(data)">
                        {{ $t('message.remote.aside.tree.deptDropDown.item1') }}
                      </el-dropdown-item>
                      <el-dropdown-item @click.native="handleDeptModify(data)">
                        {{ $t('message.remote.aside.tree.deptDropDown.item2') }}
                      </el-dropdown-item>
                      <el-dropdown-item @click.native="handleDeptDelete(data)">
                        {{ $t('message.remote.aside.tree.deptDropDown.item3') }}
                      </el-dropdown-item>
                      <el-dropdown-item
                        divided
                        @click.native="handleStationCreate(data)"
                      >
                        {{ $t('message.remote.aside.tree.deptDropDown.item4') }}
                      </el-dropdown-item>
                      <!--ip接入站-->
                      <!-- <el-dropdown-item
                        @click.native="handleIpAccessStationCreate(data)"
                      >
                        {{ $t('message.remote.aside.tree.deptDropDown.item5') }}
                      </el-dropdown-item> -->
                    </el-dropdown-menu>
                  </el-dropdown>
                </span>
              </span>
              <!--地球站-->
              <span
                v-if="data.node_type === 'station'"
                class="custom-tree-node"
              >
                <span>
                  <img
                    v-if="data.kind === 0"
                    class="tree-node-img"
                    src="@/assets/config/remote/tx.png"
                  >
                  <img
                    v-else-if="data.kind === 1"
                    class="tree-node-img"
                    src="@/assets/config/remote/bx.png"
                  >
                  <img
                    v-else-if="data.kind === 2"
                    class="tree-node-img"
                    src="@/assets/config/remote/che.png"
                  >
                  <img
                    v-else-if="data.kind === 3"
                    class="tree-node-img"
                    src="@/assets/config/remote/cz.png"
                  >
                  <img
                    v-else-if="data.kind === 4"
                    class="tree-node-img"
                    src="@/assets/config/remote/fj.png"
                  >
                  <img
                    v-else-if="data.kind === 5"
                    class="tree-node-img"
                    src="@/assets/config/remote/jrz.png"
                  >
                  <img
                    v-else-if="data.kind === 6"
                    class="tree-node-img"
                    src="@/assets/config/remote/ips.png"
                  >
                  {{ data.name }}
                </span>
                <span style="padding-right: 10px">
                  <el-dropdown v-if="$store.state.is_staff">
                    <span>
                      <i class="el-icon-arrow-down" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <!--修改-->
                      <el-dropdown-item @click.native="handleStationModify(data)">
                        {{ $t('message.remote.aside.tree.stationDropDown.item1') }}
                      </el-dropdown-item>
                      <!--删除-->
                      <el-dropdown-item @click.native="handleStationDelete(data)">
                        {{ $t('message.remote.aside.tree.stationDropDown.item2') }}
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </span>
              </span>
            </span>
          </el-tree>
        </div>
      </el-aside>
      <el-main class="el-main-padding">
        <div class="my-breadcrumb-div">
          <i class="el-icon-location my-breadcrumb-icon my-breadcrumb-padding" />
          <el-breadcrumb
            class="my-breadcrumb-padding"
            separator="/"
          >
            <el-breadcrumb-item>
              {{ $t('message.remote.breadcrumb.crumb1') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              {{ $t('message.remote.breadcrumb.crumb2') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item
              v-for="item in breadcrumbArr"
              :key="item.node_key"
            >
              {{ item.name }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-row class="margin-bottom-row">
          <el-col>
         
            <el-card>
              <div
                class="card-header-div"
                style="float: none"
              >
                {{ $t('message.remote.main.card1.title') }}：
              </div>
              <div style="text-align: left;overflow: auto">
                <!--下级单位列表-->
                <el-table
                  cell-class-name="my-table-cell my-table-cell-lineheight18"
                  :data="selection.subordinateUnits"
                  :show-header="false"
                  height="150px"
                >
                  <el-table-column prop="name">
                    <template slot-scope="scope">
                      <span style="font-size: 18px;color: #4e6d9d">
                        <img
                          class="tree-node-img"
                          src="@/assets/config/remote/dq.png"
                        >
                        {{ scope.row.name }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    v-if="$store.state.is_staff"
                    width="150px"
                    min-width="150px"
                  >
                    <template slot-scope="scope">
                      <el-button
                        style="padding: 0"
                        @click.stop="handleDeptModify(scope.row)"
                        type="text"
                      >
                        <img src="@/assets/common/edit.png">
                      </el-button>
                      <el-button
                        style="padding: 0 0 0 5px"
                        @click.stop="handleDeptDelete(scope.row)"
                        type="text"
                      >
                        <img src="@/assets/common/delete.png">
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row class="margin-bottom-row">
          <el-col>
            <el-card>
              <div
                class="card-header-div"
                style="float: none"
              >
                {{ $t('message.remote.main.card2.title') }}：{{ selection.stations.length !== 0 ? `${selection.stations.length}` : $t('message.remote.main.card2.none') }}
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-row
          :gutter="20"
          class="margin-bottom-row"
        >
          <!--地球站列表-->
          <el-col
            style="margin-bottom: 20px"
            v-for="item in selection.stations"
            :key="item.id"
            :md="12"
            :lg="8"
            :xl="8"
          >
            <el-card
              @click.native="handleStationCardClick(item)"
              :class="selection.currentNode.key === item.node_key ? 'node-card node-card-current': 'node-card'"
            >
              <div class="device-card-div">
                <div class="device-card-div-img">
                  <img
                    class="device-card-div-img-img"
                    :src="$service.renderMethod.getStationImgSrc(item.kind)"
                  >
                </div>
                <div class="device-card-div-content">
                  <div>{{ item.name }}</div>
                  <div>{{ $t('message.remote.main.card2.cardItem1') }}：{{ item.cus.length !== 0 ? item.cus[0].device : $t('message.remote.main.card2.none') }}</div>
                  <div>{{ $t('message.remote.main.card2.cardItem2') }}：{{ item.cus.length !== 0 ? item.cus[0].number : $t('message.remote.main.card2.none') }}</div>
                </div>
                <div
                  v-if="$store.state.is_staff"
                  class="device-card-div-button"
                >
                  <el-button
                    @click.stop="handleStationModify(item)"
                    class="no-padding"
                    type="text"
                  >
                    <img
                      src="@/assets/common/edit.png"
                    >
                  </el-button>
                  <el-button
                    @click.stop="handleStationDelete(item)"
                    class="no-padding"
                    style="margin-left: 0"
                    type="text"
                  >
                    <img
                      src="@/assets/common/delete.png"
                    >
                  </el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>

    <div>
      <!--部门-->
      <el-dialog
        :title="$t('message.remote.dialog.addDept.title')"
        width="20%"
        :visible.sync="dept.addDeptVisible"
      >
        <el-form
          @submit.native.prevent
          class="demo-ruleform"
          ref="addDeptForm"
          :model="dept.addDeptForm"
          :rules="$store.state.dept.checkRules"
          label-width="120px"
        >
          <el-form-item
            :label="$t('message.remote.dialog.addDept.formLabel1')"
            prop="name"
          >
            <el-input
              :maxlength="$store.state.parameters.inputLengthLimit.text"
              show-word-limit
              v-model="dept.addDeptForm.name"
            />
          </el-form-item>
          <el-form-item class="button-form-item">
            <el-button
              :loading="dept.submitButtonLoading"
              @click="submitForm('addDeptForm')"
              type="primary"
            >
              {{ $t('message.common.button.confirm') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog
        :title="$t('message.remote.dialog.modifyDept.title')"
        width="20%"
        :visible.sync="dept.modifyDeptVisible"
      >
        <el-form
          @submit.native.prevent
          class="demo-ruleform"
          ref="modifyDeptForm"
          :model="dept.modifyDeptForm"
          :rules="$store.state.dept.checkRules"
          label-width="120px"
        >
          <el-form-item
            :label="$t('message.remote.dialog.addDept.formLabel1')"
            prop="name"
          >
            <el-input
              :maxlength="$store.state.parameters.inputLengthLimit.text"
              show-word-limit
              v-model="dept.modifyDeptForm.name"
            />
          </el-form-item>
          <el-form-item class="button-form-item">
            <el-button
              :loading="dept.submitButtonLoading"
              @click="submitForm('modifyDeptForm')"
              type="primary"
            >
              {{ $t('message.common.button.confirm') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--地球站-->
      <el-dialog
        :title="$t('message.remote.dialog.addStation.title')"
        width="1000px"
        :visible.sync="station.addStationVisible"
      >
        <el-form
          class="demo-ruleform"
          ref="addStationForm"
          :model="station.addStationForm"
          :rules="$store.state.station.checkRules"
          label-width="130px"
        >
          <el-form-item
            class="form-item-33-width"
            :label="$t('message.remote.dialog.addStation.formLabel1')"
            prop="station_info.kind"
          >
            <el-select
              class="select-width-100"
              v-model="station.addStationForm.station_info.kind"
            >
              <el-option
                v-for="item in station.addStationForm.station_info.kindOption"
                :key="item.key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            class="form-item-33-width"
            :label="$t('message.remote.dialog.addStation.formLabel2')"
            prop="station_info.name"
          >
            <el-input
              :maxlength="$store.state.parameters.inputLengthLimit.text"
              show-word-limit
              v-model="station.addStationForm.station_info.name"
            />
          </el-form-item>
          <el-form-item
            class="form-item-33-width"
            :label="$t('message.remote.dialog.addStation.formLabel3')"
            prop="station_info.purpose"
          >
            <el-select
              class="select-width-100"
              v-model="station.addStationForm.station_info.purpose"
            >
              <el-option
                v-for="item in station.addStationForm.station_info.purposeOption"
                :key="item.key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!--终端信息-->
          <!--便携站1和机载站4和接入站，只有一个终端-->
          <!--<div v-if="station.addStationForm.station_info.name === 'cu'">-->
          <div v-if="station.addStationForm.station_info.kind === 1 || station.addStationForm.station_info.kind === 4 || station.addStationForm.station_info.kind === 6">
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel1')"
              prop="addCuForm.device"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-input
                :maxlength="$store.state.parameters.inputLengthLimit.cuDevice"
                show-word-limit
                v-model="station.addStationForm.addCuForm.device"
              />
            </el-form-item>
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel2')"
              prop="addCuForm.number"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-input
                :maxlength="$store.state.parameters.inputLengthLimit.cuNumber"
                show-word-limit
                v-model="station.addStationForm.addCuForm.number"
              />
            </el-form-item>
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel3')"
              prop="addCuForm.unit_type"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-select
                class="select-width-100"
                v-model="station.addStationForm.addCuForm.unit_type"
              >
                <el-option
                  v-for="item in station.addStationForm.unit_typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!--调制方式-->
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel4')"
              prop="addCuForm.modulation_type"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-select
                class="select-width-100"
                v-model="station.addStationForm.addCuForm.modulation_type"
              >
                <el-option
                  v-for="item in station.addStationForm.modulation_typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!--前向纠错编码-->
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel5')"
              prop="addCuForm.fec_type"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-select
                class="select-width-100"
                v-model="station.addStationForm.addCuForm.fec_type"
              >
                <el-option
                  v-for="item in station.addStationForm.fec_typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!--前向纠错编码率-->
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel6')"
              prop="addCuForm.fec_code_rate"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-select
                class="select-width-100"
                v-model="station.addStationForm.addCuForm.fec_code_rate"
              >
                <el-option
                  v-for="item in station.addStationForm.fec_code_rateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
          <!--其他类型的地球站，有多个终端-->
          <el-form-item
            v-if="station.addStationForm.station_info.kind !== undefined && station.addStationForm.station_info.kind !== 1 && station.addStationForm.station_info.kind !== 4 && station.addStationForm.station_info.kind !== 6"
            :label="$t('message.remote.dialog.addStation.cuTable.title')"
            style="width: 100%"
          >
            <div>
              <el-button
                @click="handleAddStationAddCu"
                type="primary"
                size="mini"
              >
                {{ $t('message.common.button.add') }}
                <i
                  class="el-icon-plus"
                  style="font-weight: bold"
                />
              </el-button>
            </div>
            <el-table
              :data="station.addStationForm.addCuTable"
              row-key="id"
              height="350px"
            >
              <!--终端编号-->
              <el-table-column
                :label="$t('message.remote.dialog.addStation.cuTable.formLabel1')"
                prop="device"
                min-width="210px"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.modify === false">
                    {{ scope.row.device }}
                  </span>
                  <el-input
                    v-if="scope.row.modify === true"
                    :maxlength="$store.state.parameters.inputLengthLimit.cuDevice"
                    show-word-limit
                    v-model="scope.row.device"
                  />
                </template>
              </el-table-column>
              <!--终端号码-->
              <el-table-column
                :label="$t('message.remote.dialog.addStation.cuTable.formLabel2')"
                prop="number"
                min-width="210px"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.modify === false">
                    {{ scope.row.number }}
                  </span>
                  <el-input
                    v-if="scope.row.modify === true"
                    :maxlength="$store.state.parameters.inputLengthLimit.cuNumber"
                    show-word-limit
                    v-model="scope.row.number"
                  />
                </template>
              </el-table-column>
              <!--终端类型-->
              <el-table-column
                :label="$t('message.remote.dialog.addStation.cuTable.formLabel3')"
                prop="unit_type"
                min-width="185px"
              >
                <template slot-scope="scope">
                  <el-select
                    v-if="scope.row.modify === true"
                    v-model="scope.row.unit_type"
                  >
                    <el-option
                      v-for="item in station.addStationForm.unit_typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <span v-if="scope.row.modify === false">
                    {{ $t('message.define.cu.unit_type')[scope.row.unit_type] }}
                  </span>
                </template>
              </el-table-column>
              <!--调制方式-->
              <el-table-column
                :label="$t('message.remote.dialog.addStation.cuTable.formLabel4')"
                prop="modulation_type"
                min-width="185px"
              >
                <template slot-scope="scope">
                  <el-select
                    v-if="scope.row.modify === true"
                    v-model="scope.row.modulation_type"
                  >
                    <el-option
                      v-for="item in station.addStationForm.modulation_typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <span v-if="scope.row.modify === false">
                    {{ $t('message.define.cu.modulation_type')[scope.row.modulation_type] }}
                  </span>
                </template>
              </el-table-column>
              <!--前向纠错编码-->
              <el-table-column
                :label="$t('message.remote.dialog.addStation.cuTable.formLabel5')"
                prop="fec_type"
                min-width="185px"
              >
                <template slot-scope="scope">
                  <el-select
                    v-if="scope.row.modify === true"
                    v-model="scope.row.fec_type"
                  >
                    <el-option
                      v-for="item in station.addStationForm.fec_typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <span v-if="scope.row.modify === false">
                    {{ $t('message.define.cu.fec_type')[scope.row.fec_type] }}
                  </span>
                </template>
              </el-table-column>
              <!--前向纠错编码率-->
              <el-table-column
                :label="$t('message.remote.dialog.addStation.cuTable.formLabel6')"
                prop="fec_code_rate"
                min-width="185px"
              >
                <template slot-scope="scope">
                  <el-select
                    v-if="scope.row.modify === true"
                    v-model="scope.row.fec_code_rate"
                  >
                    <el-option
                      v-for="item in station.addStationForm.fec_code_rateOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <span v-if="scope.row.modify === false">
                    {{ $t('message.define.cu.fec_code_rate')[scope.row.fec_code_rate] }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('message.common.label.operate')"
                fixed="right"
                min-width="180px"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.modify === true"
                    @click="handleAddStationAddCuSubmit(scope.$index, scope.row)"
                    type="mini"
                  >
                    {{ $t('message.common.button.confirm') }}
                  </el-button>
                  <el-button
                    v-if="scope.row.modify === true"
                    @click="handleAddStationAddCuCancel(scope.$index, scope.row)"
                    type="mini"
                  >
                    {{ $t('message.common.button.cancel') }}
                  </el-button>
                  <el-button
                    v-if="scope.row.modify === false"
                    @click="handleAddStationAddCuModify(scope.$index, scope.row)"
                    type="mini"
                  >
                    {{ $t('message.common.button.modify') }}
                  </el-button>
                  <el-button
                    v-if="scope.row.modify === false"
                    @click="handleAddStationAddCuDelete(scope.$index)"
                    type="mini"
                  >
                    {{ $t('message.common.button.delete') }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item
            class="button-form-item"
            style="width: 100%;margin-top: 20px"
          >
            <el-button
              :loading="station.submitButtonLoading"
              @click="handleStationCreateSubmit"
              type="primary"
            >
              {{ $t('message.common.button.confirm') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--编辑地球站-->
      <el-dialog
        :title="$t('message.remote.dialog.modifyStation.title')"
        width="1000px"
        v-loading="remoteDeviceTreeLoading"
        @close="handleStationModifyDialogClosed"
        :visible.sync="station.modifyStationVisible"
      >
        <el-form
          class="demo-ruleform"
          ref="modifyStationForm"
          :model="station.modifyStationForm"
          :rules="$store.state.station.checkRules"
          label-width="130px"
        >
          <el-form-item
            :label="$t('message.remote.dialog.addStation.formLabel1')"
            prop="station_info.kind"
            class="form-item-33-width"
          >
            <el-select
              disabled
              class="select-width-100"
              v-model="station.modifyStationForm.station_info.kind"
            >
              <el-option
                v-for="item in station.modifyStationForm.station_info.kindOption"
                :key="item.key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            class="form-item-33-width"
            :label="$t('message.remote.dialog.addStation.formLabel2')"
            prop="station_info.name"
          >
            <el-input
              :maxlength="$store.state.parameters.inputLengthLimit.text"
              show-word-limit
              v-model="station.modifyStationForm.station_info.name"
            />
          </el-form-item>
          <el-form-item
            class="form-item-33-width"
            :label="$t('message.remote.dialog.addStation.formLabel3')"
            prop="station_info.purpose"
          >
            <el-select
              class="select-width-100"
              v-model="station.modifyStationForm.station_info.purpose"
            >
              <el-option
                v-for="item in station.modifyStationForm.station_info.purposeOption"
                :key="item.key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!--终端信息-->
          <!--便携站1和机载站4，只有一个终端-->
          <div v-if="station.modifyStationForm.station_info.kind === 1 || station.modifyStationForm.station_info.kind === 4 || station.modifyStationForm.station_info.kind === 6">
            <el-form-item
              class="form-item-33-width"
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel1')"
              prop="modifyCuForm.device"
            >
              <el-input
                disabled
                :maxlength="$store.state.parameters.inputLengthLimit.cuDevice"
                show-word-limit
                v-model="station.modifyStationForm.modifyCuForm.device"
              />
            </el-form-item>
            <el-form-item
              class="form-item-33-width"
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel2')"
              prop="modifyCuForm.number"
            >
              <el-input
                :maxlength="$store.state.parameters.inputLengthLimit.cuNumber"
                show-word-limit
                v-model="station.modifyStationForm.modifyCuForm.number"
              />
            </el-form-item>
            <!--终端类型-->
            <el-form-item
              class="form-item-33-width"
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel3')"
              prop="modifyCuForm.unit_type"
            >
              <el-select
                class="select-width-100"
                v-model="station.modifyStationForm.modifyCuForm.unit_type"
              >
                <el-option
                  v-for="item in station.modifyStationForm.unit_typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!--调制方式-->
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel4')"
              prop="modifyCuForm.modulation_type"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-select
                class="select-width-100"
                v-model="station.modifyStationForm.modifyCuForm.modulation_type"
              >
                <el-option
                  v-for="item in station.modifyStationForm.modulation_typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!--前向纠错编码-->
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel5')"
              prop="modifyCuForm.modulation_type"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-select
                class="select-width-100"
                v-model="station.modifyStationForm.modifyCuForm.fec_type"
              >
                <el-option
                  v-for="item in station.modifyStationForm.fec_typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!--前向纠错编码率-->
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel6')"
              prop="modifyCuForm.modulation_type"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-select
                class="select-width-100"
                v-model="station.modifyStationForm.modifyCuForm.fec_code_rate"
              >
                <el-option
                  v-for="item in station.modifyStationForm.fec_code_rateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
          <!--其他类型的地球站，有多个终端-->
          <el-form-item
            v-if="station.modifyStationForm.station_info.kind !== undefined && station.modifyStationForm.station_info.kind !== 1 && station.modifyStationForm.station_info.kind !== 4 && station.modifyStationForm.station_info.kind !== 6"
            :label="$t('message.remote.dialog.addStation.cuTable.title')"
          >
            <div>
              <el-button
                @click="handleCuCreate"
                type="primary"
                size="mini"
              >
                {{ $t('message.common.button.add') }}
                <i
                  class="el-icon-plus"
                  style="font-weight: bold"
                />
              </el-button>
            </div>
            <el-table
              :height="350"
              :row-height="38"
              :data="station.modifyStationForm.modifyCuTable.filter(data => !station.modifyStationForm.cuTableFilterText || data.device.toString().toLowerCase().includes(station.modifyStationForm.cuTableFilterText.toLowerCase()))"
            >
              <el-table-column
                :label="$t('message.remote.dialog.addStation.cuTable.formLabel1')"
                prop="device"
                min-width="210px"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.modify === false">
                    {{ scope.row.device }}
                  </span>
                  <el-input
                    v-if="scope.row.modify === true"
                    :disabled="!scope.row.newAdd"
                    :maxlength="$store.state.parameters.inputLengthLimit.cuDevice"
                    show-word-limit
                    v-model="scope.row.device"
                  />
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('message.remote.dialog.addStation.cuTable.formLabel2')"
                prop="number"
                min-width="210px"
              >
                <template slot-scope="scope">
                  <span v-if="scope.row.modify === false">
                    {{ scope.row.number }}
                  </span>
                  <el-input
                    v-if="scope.row.modify === true"
                    :maxlength="$store.state.parameters.inputLengthLimit.cuNumber"
                    show-word-limit
                    v-model="scope.row.number"
                  />
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('message.remote.dialog.addStation.cuTable.formLabel3')"
                prop="unit_type"
                min-width="185px"
              >
                <template slot-scope="scope">
                  <el-select
                    v-if="scope.row.modify === true"
                    v-model="scope.row.unit_type"
                  >
                    <el-option
                      v-for="item in station.modifyStationForm.unit_typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <span v-if="scope.row.modify === false">
                    {{ $t('message.define.cu.unit_type')[scope.row.unit_type] }}
                  </span>
                </template>
              </el-table-column>
              <!--调制方式-->
              <el-table-column
                :label="$t('message.remote.dialog.addStation.cuTable.formLabel4')"
                prop="unit_type"
                min-width="185px"
              >
                <template slot-scope="scope">
                  <el-select
                    v-if="scope.row.modify === true"
                    v-model="scope.row.modulation_type"
                  >
                    <el-option
                      v-for="item in station.modifyStationForm.modulation_typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <span v-if="scope.row.modify === false">
                    {{ $t('message.define.cu.modulation_type')[scope.row.modulation_type] }}
                  </span>
                </template>
              </el-table-column>
              <!--前向纠错编码-->
              <el-table-column
                :label="$t('message.remote.dialog.addStation.cuTable.formLabel5')"
                prop="unit_type"
                min-width="185px"
              >
                <template slot-scope="scope">
                  <el-select
                    v-if="scope.row.modify === true"
                    v-model="scope.row.fec_type"
                  >
                    <el-option
                      v-for="item in station.modifyStationForm.fec_typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <span v-if="scope.row.modify === false">
                    {{ $t('message.define.cu.fec_type')[scope.row.fec_type] }}
                  </span>
                </template>
              </el-table-column>
              <!--前向纠错编码率-->
              <el-table-column
                :label="$t('message.remote.dialog.addStation.cuTable.formLabel6')"
                prop="unit_type"
                min-width="185px"
              >
                <template slot-scope="scope">
                  <el-select
                    v-if="scope.row.modify === true"
                    v-model="scope.row.fec_code_rate"
                  >
                    <el-option
                      v-for="item in station.modifyStationForm.fec_code_rateOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <span v-if="scope.row.modify === false">
                    {{ $t('message.define.cu.fec_code_rate')[scope.row.fec_code_rate] }}
                  </span>
                </template>
              </el-table-column>
              <!--:label="$t('message.common.label.operate')"-->
              <el-table-column
                fixed="right"
                min-width="180px"
              >
                <template
                  slot="header"
                >
                  <el-input
                    v-model="station.modifyStationForm.cuTableFilterText"
                    size="mini"
                    :placeholder="$t('message.remote.dialog.addStation.cuTable.filterPlaceholder')"
                  />
                </template>
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.modify === true"
                    @click="handleCuCreateSubmit(scope.$index, scope.row)"
                    type="mini"
                  >
                    {{ $t('message.common.button.confirm') }}
                  </el-button>
                  <el-button
                    v-if="scope.row.modify === true"
                    @click="handleCuCreateCancel(scope.$index,scope.row)"
                    type="mini"
                  >
                    {{ $t('message.common.button.cancel') }}
                  </el-button>
                  <el-button
                    v-if="scope.row.modify === false"
                    @click="handleCuModify(scope.$index,scope.row)"
                    type="mini"
                  >
                    {{ $t('message.common.button.modify') }}
                  </el-button>
                  <el-button
                    v-if="scope.row.modify === false"
                    @click="handleCuDelete(scope.$index, scope.row)"
                    type="mini"
                  >
                    {{ $t('message.common.button.delete') }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
          <el-form-item
            class="button-form-item"
            style="width: 100%;margin-top: 20px"
          >
            <el-button
              :loading="station.submitButtonLoading"
              @click="handleStationModifySubmit"
              type="primary"
            >
              {{ $t('message.common.button.confirm') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!--IP接入站-->
      <el-dialog
        :title="ipAccessFormTitle"
        width="1000px"
        :visible.sync="ipAccessStation.visible"
        @closed="handleIpAccessStationDialogClose"
      >
        <el-form
          ref="ipAccessStationForm"
          :model="ipAccessStation"
          :rules="$store.state.station.checkRulesAccess"
          label-width="130px"
        >
          <!--类型-->
          <el-form-item
            class="form-item-33-width"
            :label="$t('message.remote.dialog.addStation.formLabel1')"
            prop="station_info.kind"
          >
            <el-select
              class="select-width-100"
              disabled
              v-model="ipAccessStation.station_info.kind"
            >
              <el-option
                v-for="item in ipAccessStation.kindOption"
                :key="item.key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!--名称-->
          <el-form-item
            class="form-item-33-width"
            :label="$t('message.remote.dialog.addStation.formLabel2')"
            prop="station_info.name"
          >
            <el-input
              :maxlength="$store.state.parameters.inputLengthLimit.text"
              show-word-limit
              v-model="ipAccessStation.station_info.name"
            />
          </el-form-item>
          <!--用途-->
          <el-form-item
            class="form-item-33-width"
            :label="$t('message.remote.dialog.addStation.formLabel3')"
            prop="station_info.purpose"
          >
            <el-select
              class="select-width-100"
              v-model="ipAccessStation.station_info.purpose"
            >
              <el-option
                v-for="item in ipAccessStation.purposeOption"
                :key="item.key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <!--终端信息-->
          <div style="text-align: left">
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel1')"
              prop="cu_info.device"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-input
                :disabled="!ipAccessStation.dept"
                :maxlength="$store.state.parameters.inputLengthLimit.cuDevice"
                show-word-limit
                v-model.number="ipAccessStation.cu_info.device"
              />
            </el-form-item>
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel2')"
              prop="cu_info.number"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-input
                :maxlength="$store.state.parameters.inputLengthLimit.cuNumber"
                show-word-limit
                v-model.number="ipAccessStation.cu_info.number"
              />
            </el-form-item>
            <!--终端类型-->
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel3')"
              prop="cu_info.unit_type"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-select
                class="select-width-100"
                v-model="ipAccessStation.cu_info.unit_type"
              >
                <el-option
                  v-for="item in ipAccessStation.unit_typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!--调制方式-->
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel4')"
              prop="cu_info.modulation_type"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-select
                class="select-width-100"
                v-model="ipAccessStation.cu_info.modulation_type"
              >
                <el-option
                  v-for="item in ipAccessStation.modulation_typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!--前向纠错编码-->
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel5')"
              prop="cu_info.fec_type"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-select
                class="select-width-100"
                v-model="ipAccessStation.cu_info.fec_type"
              >
                <el-option
                  v-for="item in ipAccessStation.fec_typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!--前向纠错编码率-->
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel6')"
              prop="cu_info.fec_code_rate"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-select
                class="select-width-100"
                v-model="ipAccessStation.cu_info.fec_code_rate"
              >
                <el-option
                  v-for="item in ipAccessStation.fec_code_rateOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!--最大速率-->
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel7')"
              prop="cu_info.speed_max"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-input
                :maxlength="$store.state.parameters.inputLengthLimit.cuNumber"
                show-word-limit
                v-model.number="ipAccessStation.cu_info.speed_max"
              />
            </el-form-item>
            <!--功率-->
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel8')"
              prop="cu_info.power"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-input
                :maxlength="$store.state.parameters.inputLengthLimit.cuNumber"
                show-word-limit
                v-model.number="ipAccessStation.cu_info.power"
              />
            </el-form-item>
            <el-form-item
              :label="$t('message.remote.dialog.addStation.cuItem.formLabel9')"
              prop="cu_info.address"
              label-width="130px"
              class="form-item-33-width"
            >
              <el-input
                :maxlength="$store.state.parameters.inputLengthLimit.ipAddress"
                show-word-limit
                v-model="ipAccessStation.cu_info.address"
              />
            </el-form-item>
          </div>
          <el-form-item
            class="button-form-item"
            style="width: 100%;margin-top: 20px"
          >
            <el-button
              :loading="ipAccessStation.submitButtonLoading"
              @click="handleIpAccessStationSubmit('ipAccessStationForm')"
              type="primary"
            >
              {{ $t('message.common.button.confirm') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import service from '@/service/service'
export default {
  name: 'Remote',
  data () {
    return {
      testString: '',
      breadcrumbArr: [],
      defaultTreeProps: {
        label: 'name',
        children: 'children'
      },
      remoteDeviceTreeLoading: false,
      remoteDeviceTree: [],
      selection: {
        currentNode: null,
        currentNodeParent: null,
        subordinateUnits: [],
        stations: []
      },

      dept: {
        addDeptVisible: false,
        submitButtonLoading: false,

        addDeptForm: {
          name: ''
        },
        modifyDeptVisible: false,
        modifyDeptForm: {
          id: '',
          name: ''
        }
      },

      station: {
        addStationVisible: false,
        submitButtonLoading: false,

        addStationForm: {
          station_info: {
            dept: '',
            name: '',
            kind: '',
            kindOption: [],
            purpose: '',
            purposeOption: []
          },
          unit_typeOptions: [],
          modulation_typeOptions: [],
          fec_typeOptions: [],
          fec_code_rateOptions: [],
          modifyCuInfo: {
            id: '',
            device: '',
            number: '',
            unit_type: '',
            modulation_type: '',
            fec_type: '',
            fec_code_rate: ''
          },
          addCuForm: {
            device: '',
            number: '',
            unit_type: '',
            modulation_type: '',
            fec_type: '',
            fec_code_rate: ''
          },
          modifying: false,
          addCuTable: []
        },
        modifyStationVisible: false,
        modifyStationForm: {
          station_info: {
            name: '',
            kind: '',
            kindOption: [],
            purpose: '',
            purposeOption: []
          },
          unit_typeOptions: [],
          modulation_typeOptions: [],
          fec_typeOptions: [],
          fec_code_rateOptions: [],
          modifying: false,
          modifyCuForm: {
            device: '',
            number: '',
            unit_type: '',
            modulation_type: '',
            fec_type: '',
            fec_code_rate: ''
          },
          cuTableFilterText: '',
          modifyCuTable: []
        }
      },

      // ip access station
      ipAccessStation: {
        visible: false,
        dept: null, // 添加时的上级部门，根据此字段有无来判断添加还是修改操作
        submitButtonLoading: false,

        kindOption: [],
        purposeOption: [],
        station_info: {
          name: '',
          kind: 6,
          purpose: ''
        },
        unit_typeOptions: [],
        modulation_typeOptions: [],
        fec_typeOptions: [],
        fec_code_rateOptions: [],
        cu_info: {
          device: '',
          number: '',
          unit_type: '',
          modulation_type: '',
          fec_type: '',
          fec_code_rate: '',
          speed_max: '',
          power: '',
          address: ''
        }
      }
    }
  },
  computed: {
    ipAccessFormTitle () {
      return (this.ipAccessStation.dept
      // 添加 | 修改
        ? this.$t('message.common.button.add')
        : this.$t('message.common.button.modify')) +
        this.$t('message.define.station.kind.6')
    }
  },
  mounted () {
    let self = this
    self.$nextTick(() => {
      self.getDeviceTree()
    })
  },
  methods: {
    setBreadcrumb (node, clear = false) {
      let self = this
      if (clear) {
        self.breadcrumbArr = []
      }
      if (node) {
        self.breadcrumbArr.unshift({
          id: node.data.id,
          name: node.data.name,
          node_type: node.data.node_type,
          node_key: node.key
        })
        if (node.parent.level !== 0) {
          self.setBreadcrumb(node.parent)
        }
      }
    },
    async getDeviceTree () {
      let self = this
      self.remoteDeviceTreeLoading = true
      let response = await self.$store.dispatch(`axios`, {
        method: 'get',
        url: '/api/abs/devices/dept_tree/',
        params: {
          center: 0
        }
      })
      self.remoteDeviceTree = [response.data]
      self.remoteDeviceTreeLoading = false
      return 1
    },
    // 数据同步服务
    async handleMainCardDataUpdate () {
      let self = this
      if (self.selection.currentNode) {
        // 设置高亮节点
        self.$refs.deptTree.setCurrentKey(self.selection.currentNode.data.node_key)
        let currentNode = self.$refs.deptTree.getNode(self.selection.currentNode.data.node_key)
        if (currentNode) {
          if (currentNode.data.node_type === 'dept') {
            self.selection.currentNode = currentNode
            self.selection.stations = currentNode.data.children.filter(item => item.node_type === 'station')
            self.selection.subordinateUnits = currentNode.data.children.filter(item => item.node_type === 'dept')
          } else if (currentNode.data.node_type === 'station') {
            self.selection.currentNode = currentNode
            self.selection.currentNodeParent = currentNode.parent
            self.selection.stations = currentNode.parent.data.children.filter(item => item.node_type === 'station')
            self.selection.subordinateUnits = currentNode.parent.data.children.filter(item => item.node_type === 'dept')
          }
        } else {
          // 当tree中没有该key的节点时(节点被删除)
          if (self.selection.currentNode.data.node_type === 'station') {
            // 当地球站被删除时,获取父节点部门的信息并更新
            currentNode = self.selection.currentNodeParent
            self.selection.currentNode = currentNode
            self.selection.stations = currentNode.data.children.filter(item => item.node_type === 'station')
            self.selection.subordinateUnits = currentNode.data.children.filter(item => item.node_type === 'dept')
          } else {
            // 当前选择的部门节点被删除时,直接清空所有的selection信息
            self.selection.currentNode = null
            self.selection.stations = []
            self.selection.subordinateUnits = []
          }
        }
        self.setBreadcrumb(currentNode, true)
      }
    },
    handleTreeNodeClick (data, node) {
      let self = this
      self.selection.stations = []
      self.selection.subordinateUnits = []
      self.selection.currentNode = node
      self.selection.currentNodeParent = null
      // 单击部门
      if (data.node_type === 'dept') {
        self.selection.stations = data.children.filter(item => item.node_type === 'station')
        self.selection.subordinateUnits = data.children.filter(item => item.node_type === 'dept')
      } else if (data.node_type === 'station') {
        self.selection.currentNodeParent = node.parent
        self.selection.stations = node.parent.data.children.filter(item => item.node_type === 'station')
        self.selection.subordinateUnits = node.parent.data.children.filter(item => item.node_type === 'dept')
      } else if (data.node_type === 'root') {
        self.selection.subordinateUnits = data.children.filter(item => item.node_type === 'dept').map(item => {
          return {
            ...item,
            children: undefined
          }
        })
      }
      // 设置面包屑导航
      self.setBreadcrumb(node, true)
    },
    handleStationCardClick (item) {
      let self = this
      self.$refs.deptTree.setCurrentKey(item.node_key)
      let currentNode = self.$refs.deptTree.getNode(item.node_key)
      console.log(currentNode);
      if (currentNode) {
        if (currentNode.data.node_type === 'dept') {
          self.selection.currentNode = currentNode
          self.selection.stations = currentNode.data.children.filter(item => item.node_type === 'station')
          self.selection.subordinateUnits = currentNode.data.children.filter(item => item.node_type === 'dept')
        } else if (currentNode.data.node_type === 'station') {
          self.selection.currentNode = currentNode
          self.selection.currentNodeParent = currentNode.parent
          self.selection.stations = currentNode.parent.data.children.filter(item => item.node_type === 'station')
          self.selection.subordinateUnits = currentNode.parent.data.children.filter(item => item.node_type === 'dept')
        }
        // 设置面包屑导航
        self.setBreadcrumb(currentNode, true)
      } else {
        self.$message.error(self.$t('message.remote.error.err1'))
      }
    },
    // 部门
    handleDeptCreate (data = null) {
      let self = this
      self.dept.addDeptForm.higher_dept = null
      if (data !== null) {
        self.dept.addDeptForm.higher_dept = data.id
      }
      self.dept.addDeptVisible = true
    },
    handleDeptModify (data) {
      let self = this
      self.dept.modifyDeptForm = {
        ...self.dept.modifyDeptForm,
        ...data
      }
      self.dept.modifyDeptVisible = true
    },
    async handleDeptDelete (data) {
      let self = this
      try {
        await self.$confirm(self.$t('message.remote.dialog.deleteDept.promptLabel', { name: data.name }), self.$t('message.common.label.prompt'), {
          confirmButtonText: self.$t('message.common.button.confirm'),
          cancelButtonText: self.$t('message.common.button.cancel'),
          type: 'warning'
        })
      } catch (e) {
        return
      }
      await self.$store.dispatch(`axios`, {
        method: 'delete',
        url: `/api/abs/devices/depts/${data.id}/`
      })
      self.$message({
        message: self.$t('message.remote.dialog.deleteDept.successMessage'),
        type: 'success'
      })
      self.$refs.deptTree.remove(data.node_key)
      self.handleMainCardDataUpdate()
    },
    // 地球站
    handleStationCreate (dept) {
      let self = this
      self.station.addStationForm.station_info = {
        ...self.station.addStationForm,
        dept: dept.id,
        // kindOption: define.getListOfStationKindDefine(),
        kindOption: service.getOptionList(self.$t('message.define.station.kind')).filter(item => parseInt(item.value) !== 6),
        purposeOption: service.getOptionList(self.$t('message.define.station.purpose'))
      }
      // 设置cu的unity_type的选项
      self.station.addStationForm.unit_typeOptions = service.getOptionList(self.$t('message.define.cu.unit_type')).filter(item => parseInt(item.value) < 2)
      self.station.addStationForm.modulation_typeOptions = service.getOptionList(self.$t('message.define.cu.modulation_type'))
      self.station.addStationForm.fec_typeOptions = service.getOptionList(self.$t('message.define.cu.fec_type'))
      self.station.addStationForm.fec_code_rateOptions = service.getOptionList(self.$t('message.define.cu.fec_code_rate'))
      self.station.addStationForm.addCuTable = []
      self.station.addStationForm.addCuForm.device = ''
      self.station.addStationForm.addCuForm.number = ''
      self.station.addStationForm.modifying = false
      self.station.addStationVisible = true
    },
    handleStationCreateSubmit () {
      let self = this
      if (self.station.addStationForm.modifying) {
        self.$message({
          message: self.$t('message.remote.dialog.addStation.cuOperatePrompt'),
          type: 'error'
        })
      } else {
        self.submitForm('addStationForm')
      }
    },
    handleAddStationAddCu () {
      let self = this
      // 判断是否有终端处于编辑状态，若有则不允许继续添加
      if (self.station.addStationForm.modifying) {
        self.$message({
          message: self.$t('message.remote.dialog.addStation.cuOperatePrompt2'),
          type: 'error'
        })
        return
      }
      self.station.addStationForm.modifying = true
      self.station.addStationForm.addCuTable.unshift({
        modify: true,
        newAdd: true,
        device: '',
        number: '',
        unit_type: '',
        modulation_type: '',
        fec_type: '',
        fec_code_rate: ''
      })
    },
    // 确认
    handleAddStationAddCuSubmit (index, row) {
      let self = this
      if (row.device !== '' && row.number !== '' && row.unit_type !== '') {
        self.station.addStationForm.addCuTable[index].modify = false
        self.station.addStationForm.addCuTable[index].newAdd = false
        self.station.addStationForm.modifying = false
      } else {
        self.$message({
          message: self.$t('message.common.info.stringNotNull'),
          type: 'error'
        })
      }
    },
    // 取消
    handleAddStationAddCuCancel (index, row) {
      let self = this
      if (row.newAdd) {
        self.station.addStationForm.addCuTable.splice(index, 1)
      } else {
        self.station.addStationForm.addCuTable[index].modify = false
        self.station.addStationForm.addCuTable[index].id = self.station.addStationForm.modifyCuInfo.id
        self.station.addStationForm.addCuTable[index].device = self.station.addStationForm.modifyCuInfo.device
        self.station.addStationForm.addCuTable[index].number = self.station.addStationForm.modifyCuInfo.number
        self.station.addStationForm.addCuTable[index].unit_type = self.station.addStationForm.modifyCuInfo.unit_type
        self.station.addStationForm.addCuTable[index].modulation_type = self.station.addStationForm.modifyCuInfo.modulation_type
        self.station.addStationForm.addCuTable[index].fec_type = self.station.addStationForm.modifyCuInfo.fec_type
        self.station.addStationForm.addCuTable[index].fec_code_rate = self.station.addStationForm.modifyCuInfo.fec_code_rate
      }
      self.station.addStationForm.modifying = false
    },
    // 编辑
    handleAddStationAddCuModify (index, row) {
      let self = this
      // 判断是否有终端处于编辑状态，若有则不允许继续添加
      if (self.station.addStationForm.modifying) {
        self.$message({
          message: self.$t('message.remote.dialog.addStation.cuOperatePrompt2'),
          type: 'error'
        })
      } else {
        self.station.addStationForm.modifying = true
        self.station.addStationForm.modifyCuInfo.id = row.id
        self.station.addStationForm.modifyCuInfo.device = row.device
        self.station.addStationForm.modifyCuInfo.number = row.number
        self.station.addStationForm.modifyCuInfo.unit_type = row.unit_type
        self.station.addStationForm.modifyCuInfo.modulation_type = row.modulation_type
        self.station.addStationForm.modifyCuInfo.fec_type = row.fec_type
        self.station.addStationForm.modifyCuInfo.fec_code_rate = row.fec_code_rate
        self.station.addStationForm.addCuTable[index].modify = true
      }
    },
    // 删除
    handleAddStationAddCuDelete (index) {
      let self = this
      self.station.addStationForm.addCuTable.splice(index, 1)
    },
    handleStationModify (data) {
      let self = this
      // 判断是否为ipaccess
      if (data.kind === 6) {
        self.handleIpAccessStationModify(data)
      } else {
        self.station.modifyStationForm.station_info = {
          ...self.station.modifyStationForm.station_info,
          id: data.id,
          name: data.name,
          kind: data.kind,
          kindOption: service.getOptionList(self.$t('message.define.station.kind')),
          purpose: data.purpose,
          purposeOption: service.getOptionList(self.$t('message.define.station.purpose'))
        }
        self.station.modifyStationForm.unit_typeOptions = service.getOptionList(self.$t('message.define.cu.unit_type')).filter(item => parseInt(item.value) < 2)
        self.station.modifyStationForm.modulation_typeOptions = service.getOptionList(self.$t('message.define.cu.modulation_type'))
        self.station.modifyStationForm.fec_typeOptions = service.getOptionList(self.$t('message.define.cu.fec_type'))
        self.station.modifyStationForm.fec_code_rateOptions = service.getOptionList(self.$t('message.define.cu.fec_code_rate'))
        // station的终端信息
        if (data.kind === 1 || data.kind === 4) {
          if (data.cus.length === 0) {
            // 地球站没有终端
            self.$message.error(self.$t('message.remote.dialog.addStation.noCu'))
            return
          }
          self.station.modifyStationForm.modifyCuForm = {
            id: data.cus[0].id,
            device: data.cus[0].device,
            number: data.cus[0].number,
            unit_type: data.cus[0].unit_type,
            modulation_type: data.cus[0].modulation_type,
            fec_type: data.cus[0].fec_type,
            fec_code_rate: data.cus[0].fec_code_rate
          }
        } else {
          self.station.modifyStationForm.modifyCuTable = [
            ...data.cus.map(item => {
              return {
                id: item.id,
                modify: false,
                newAdd: false,
                device: item.device,
                number: item.number,
                unit_type: item.unit_type,
                modulation_type: item.modulation_type,
                fec_type: item.fec_type,
                fec_code_rate: item.fec_code_rate
              }
            })
          ]
          self.station.modifyStationForm.modifying = false
        }
        self.station.modifyStationVisible = true
      }
    },
    handleStationModifySubmit () {
      let self = this
      if (self.station.modifyStationForm.modifying) {
        self.$message({
          message: self.$t('message.remote.dialog.addStation.cuOperatePrompt'),
          type: 'error'
        })
      } else {
        self.submitForm('modifyStationForm')
      }
    },
    handleStationModifyDialogClosed () {
      let self = this
      self.station.modifyStationForm.modifying = false
    },
    async handleStationDelete (data) {
      let self = this
      try {
        await self.$confirm(self.$t('message.remote.dialog.deleteStation.promptLabel', { name: data.name }), self.$t('message.common.label.prompt'), {
          confirmButtonText: self.$t('message.common.button.confirm'),
          cancelButtonText: self.$t('message.common.button.cancel'),
          type: 'warning'
        })
      } catch (e) {
        return
      }
      await self.$store.dispatch(`axios`, {
        method: 'delete',
        url: `/api/abs/devices/stations/${data.id}/`
      })
      self.$message({
        message: self.$t('message.remote.dialog.deleteStation.successMessage'),
        type: 'success'
      })
      self.$refs.deptTree.remove(data.node_key)
      self.handleMainCardDataUpdate()
    },
    handleCuCreate () {
      let self = this
      // 当前有且只有一个cu处于编辑状态
      if (self.station.modifyStationForm.modifying) {
        self.$message({
          message: self.$t('message.remote.dialog.addStation.cuOperatePrompt'),
          type: 'error'
        })
        return
      } else {
        // 弱在修改地球站页面增加终端
        // 则先删除cuTabl的过滤条件字段
        self.station.modifyStationForm.cuTableFilterText = ''
        self.station.modifyStationForm.modifying = true
      }
      self.station.modifyStationForm.modifyCuTable.unshift({
        newAdd: true,
        modify: true,
        device: '',
        number: '',
        modulation_type: '',
        fec_type: '',
        fec_code_rate: ''
      })
    },
    async handleCuCreateSubmit (index, row) {
      let self = this
      if (row.newAdd) {
        let response = await self.$store.dispatch(`axios`, {
          method: 'post',
          url: `/api/abs/devices/cus/`,
          data: {
            station: self.station.modifyStationForm.station_info.id,
            device: row.device,
            number: row.number,
            unit_type: row.unit_type,
            modulation_type: row.modulation_type,
            fec_type: row.fec_type,
            fec_code_rate: row.fec_code_rate
          }
        })
        self.station.modifyStationForm.modifyCuTable[index].id = response.data.id
        self.station.modifyStationForm.modifyCuTable[index].newAdd = false
        self.station.modifyStationForm.modifyCuTable[index].modify = false
        self.station.modifyStationForm.modifying = false
        self.$message({
          message: self.$t('message.common.info.addSuccess'),
          type: 'success'
        })
      } else {
        await self.$store.dispatch(`axios`, {
          method: 'patch',
          url: `/api/abs/devices/cus/${row.id}/`,
          data: {
            device: row.device,
            number: row.number,
            unit_type: row.unit_type,
            modulation_type: row.modulation_type,
            fec_type: row.fec_type,
            fec_code_rate: row.fec_code_rate
          }
        })
        self.station.modifyStationForm.modifyCuTable[index].modify = false
        self.station.modifyStationForm.modifying = false
        self.$message({
          message: self.$t('message.common.info.modifySuccess'),
          type: 'success'
        })
      }
      await self.getDeviceTree()
      self.$nextTick(() => {
        self.handleMainCardDataUpdate()
      })
    },
    handleCuCreateCancel (index, row) {
      let self = this
      if (row.newAdd) {
        self.station.modifyStationForm.modifyCuTable.splice(index, 1)
        self.station.modifyStationForm.modifying = false
      } else {
        self.station.modifyStationForm.modifyCuTable[index].modify = false
        self.station.modifyStationForm.modifyCuTable[index].device = self.station.modifyStationForm.modifyCuForm.device
        self.station.modifyStationForm.modifyCuTable[index].number = self.station.modifyStationForm.modifyCuForm.number
        self.station.modifyStationForm.modifyCuTable[index].unit_type = self.station.modifyStationForm.modifyCuForm.unit_type
        self.station.modifyStationForm.modifyCuTable[index].modulation_type = self.station.modifyStationForm.modifyCuForm.modulation_type
        self.station.modifyStationForm.modifyCuTable[index].fec_type = self.station.modifyStationForm.modifyCuForm.fec_type
        self.station.modifyStationForm.modifyCuTable[index].fec_code_rate = self.station.modifyStationForm.modifyCuForm.fec_code_rate
        self.station.modifyStationForm.modifying = false
      }
    },
    handleCuModify (index, row) {
      let self = this
      // 当前有且只有一个cu处于编辑状态
      if (self.station.modifyStationForm.modifying) {
        self.$message({
          message: self.$t('message.remote.dialog.addStation.cuOperatePrompt'),
          type: 'error'
        })
      } else {
        self.station.modifyStationForm.modifying = true
        self.station.modifyStationForm.modifyCuForm.id = row.id
        self.station.modifyStationForm.modifyCuForm.device = row.device
        self.station.modifyStationForm.modifyCuForm.number = row.number
        self.station.modifyStationForm.modifyCuForm.unit_type = row.unit_type
        self.station.modifyStationForm.modifyCuForm.modulation_type = row.modulation_type
        self.station.modifyStationForm.modifyCuForm.fec_type = row.fec_type
        self.station.modifyStationForm.modifyCuForm.fec_code_rate = row.fec_code_rate
        self.station.modifyStationForm.modifyCuTable[index].modify = true
      }
    },
    async handleCuDelete (index, row) {
      let self = this
      try {
        await self.$confirm(self.$t('message.remote.dialog.deleteCu.promptLabel', { name: row.device }), self.$t('message.common.label.prompt'), {
          confirmButtonText: self.$t('message.common.button.confirm'),
          cancelButtonText: self.$t('message.common.button.cancel'),
          type: 'warning'
        })
      } catch (e) {
        return
      }
      await self.$store.dispatch(`axios`, {
        method: 'delete',
        url: `/api/abs/devices/cus/${row.id}/`
      })
      self.$message({
        message: self.$t('message.common.info.deleteSuccess'),
        type: 'success'
      })
      self.station.modifyStationForm.modifyCuTable.splice(index, 1)
      await self.getDeviceTree()
      self.$nextTick(() => {
        self.handleMainCardDataUpdate()
      })
    },

    // ip access statioin
    handleIpAccessStationCreate (dept) {
      let self = this
      self.ipAccessStation.dept = dept
      // 设置station的select选项
      self.ipAccessStation.kindOption = service.getOptionList(self.$t('message.define.station.kind'))
      self.ipAccessStation.purposeOption = service.getOptionList(self.$t('message.define.station.purpose'))
      // 设置cu的select的选项
      self.ipAccessStation.unit_typeOptions = service.getOptionList(self.$t('message.define.cu.unit_type')).filter(item => parseInt(item.value) > 1)
      self.ipAccessStation.modulation_typeOptions = service.getOptionList(self.$t('message.define.cu.modulation_type'))
      self.ipAccessStation.fec_typeOptions = service.getOptionList(self.$t('message.define.cu.fec_type'))
      self.ipAccessStation.fec_code_rateOptions = service.getOptionList(self.$t('message.define.cu.fec_code_rate'))
      self.ipAccessStation.visible = true
    },
    handleIpAccessStationModify (data) {
      let self = this
      self.ipAccessStation.station_info = {
        ...self.ipAccessStation.station_info,
        ...data
      }
      self.ipAccessStation.cu_info = {
        ...self.ipAccessStation.cu_info,
        ...data.cus[0],
        number: parseInt(data.cus[0].number)
      }
      // 设置station的select选项
      self.ipAccessStation.kindOption = service.getOptionList(self.$t('message.define.station.kind'))
      self.ipAccessStation.purposeOption = service.getOptionList(self.$t('message.define.station.purpose'))
      // 设置cu的select的选项
      self.ipAccessStation.unit_typeOptions = service.getOptionList(self.$t('message.define.cu.unit_type')).filter(item => parseInt(item.value) > 1)
      self.ipAccessStation.modulation_typeOptions = service.getOptionList(self.$t('message.define.cu.modulation_type'))
      self.ipAccessStation.fec_typeOptions = service.getOptionList(self.$t('message.define.cu.fec_type'))
      self.ipAccessStation.fec_code_rateOptions = service.getOptionList(self.$t('message.define.cu.fec_code_rate'))
      self.ipAccessStation.visible = true
    },
    handleIpAccessStationSubmit (formName) {
      let self = this
      if (self.ipAccessStation.dept) {
        self.handleIpAccessStationCreateSubmit(formName)
      } else {
        self.handleIpAccessStationModifySubmit(formName)
      }
    },
    async handleIpAccessStationCreateSubmit (formName) {
      let self = this
      await self.$refs[formName].validate()
      self.ipAccessStation.submitButtonLoading = true
      try {
        await self.$store.dispatch(`axios`, {
          method: 'post',
          url: `/api/abs/devices/station_cu/`,
          data: {
            station_info: {
              dept: self.ipAccessStation.dept.id,
              ...self.ipAccessStation.station_info
            },
            cu_info: [self.ipAccessStation.cu_info]
          }
        })
      } finally {
        self.ipAccessStation.submitButtonLoading = false
      }
      self.ipAccessStation.visible = false
      self.$message({
        message: self.$t('message.common.info.addSuccess'),
        type: 'success'
      })
      await self.getDeviceTree()
      self.$nextTick(() => {
        self.handleMainCardDataUpdate()
      })
    },
    async handleIpAccessStationModifySubmit (formName) {
      let self = this
      await self.$refs[formName].validate()
      self.ipAccessStation.submitButtonLoading = true
      try {
        await self.$store.dispatch(`axios`, {
          method: 'patch',
          url: `/api/abs/devices/station_cu/${self.ipAccessStation.station_info.id}/`,
          data: {
            station_info: {
              name: self.ipAccessStation.station_info.name,
              kind: self.ipAccessStation.station_info.kind,
              purpose: self.ipAccessStation.station_info.purpose
            },
            cu_info: [self.ipAccessStation.cu_info]
          }
        })
      } finally {
        self.ipAccessStation.submitButtonLoading = false
      }
      self.ipAccessStation.visible = false
      self.$message({
        message: self.$t('message.common.info.modifySuccess'),
        type: 'success'
      })
      await self.getDeviceTree()
      self.$nextTick(() => {
        self.handleMainCardDataUpdate()
      })
    },
    handleIpAccessStationDialogClose () {
      let self = this
      self.ipAccessStation.dept = null
      self.ipAccessStation.station_info = {
        name: '',
        kind: 6,
        purpose: ''
      }
      self.ipAccessStation.cu_info = {
        device: '',
        number: '',
        unit_type: '',
        modulation_type: '',
        fec_type: '',
        fec_code_rate: '',
        speed_max: '',
        power: ''
      }
    },

    submitForm (formName) {
      let self = this
      self.$refs[formName].validate(async valid => {
        if (valid) {
          // 部门
          if (formName === 'addDeptForm') {
            self.dept.submitButtonLoading = true
            try {
              await self.$store.dispatch(`axios`, {
                method: 'post',
                url: '/api/abs/devices/depts/',
                data: self.dept.addDeptForm
              })
            } finally {
              self.dept.submitButtonLoading = false
            }
            self.dept.addDeptVisible = false
            self.$message({
              message: self.$t('message.common.info.addSuccess'),
              type: 'success'
            })
            await self.getDeviceTree()
            self.$nextTick(() => {
              self.handleMainCardDataUpdate()
            })
          }
          if (formName === 'modifyDeptForm') {
            self.dept.submitButtonLoading = true
            try {
              await self.$store.dispatch(`axios`, {
                method: 'patch',
                url: `/api/abs/devices/depts/${self.dept.modifyDeptForm.id}/`,
                data: {
                  name: self.dept.modifyDeptForm.name
                }
              })
            } finally {
              self.dept.submitButtonLoading = false
            }
            self.dept.modifyDeptVisible = false
            self.$message({
              message: self.$t('message.common.info.modifySuccess'),
              type: 'success'
            })
            await self.getDeviceTree()
            self.$nextTick(() => {
              self.handleMainCardDataUpdate()
            })
          }
          // 地球站
          if (formName === 'addStationForm') {
            let payload = {
              station_info: {
                dept: self.station.addStationForm.station_info.dept,
                name: self.station.addStationForm.station_info.name,
                kind: self.station.addStationForm.station_info.kind,
                purpose: self.station.addStationForm.station_info.purpose
              },
              cu_info: []
            }
            // 当添加的终端类型为便携站或机载站时,只有一个终端
            if (self.station.addStationForm.station_info.kind === 1 || self.station.addStationForm.station_info.kind === 4) {
              payload.cu_info.push({
                device: self.station.addStationForm.addCuForm.device,
                number: self.station.addStationForm.addCuForm.number,
                unit_type: self.station.addStationForm.addCuForm.unit_type,
                modulation_type: self.station.addStationForm.addCuForm.modulation_type,
                fec_type: self.station.addStationForm.addCuForm.fec_type,
                fec_code_rate: self.station.addStationForm.addCuForm.fec_code_rate
              })
            }
            // 当添加的终端类型为其他类型时,有多个终端
            if (self.station.addStationForm.station_info.kind !== 1 && self.station.addStationForm.station_info.kind !== 4 && self.station.addStationForm.station_info.kind !== 6) {
              payload.cu_info = [
                ...self.station.addStationForm.addCuTable
              ]
            }
            self.station.submitButtonLoading = true
            try {
              await self.$store.dispatch(`axios`, {
                method: 'post',
                url: `/api/abs/devices/station_cu/`,
                data: payload
              })
            } finally {
              self.station.submitButtonLoading = false
            }
            self.station.addStationVisible = false
            self.$message({
              message: self.$t('message.common.info.addSuccess'),
              type: 'success'
            })
            // 当添加了接入站时，提示
            if (payload.station_info.kind === 5) {
              self.$notify({
                title: self.$t('message.common.label.prompt'),
                message: `${payload.station_info.name}${self.$t('message.remote.message.msg1')}`,
                duration: 0
              })
            }
            await self.getDeviceTree()
            self.$nextTick(() => {
              self.handleMainCardDataUpdate()
            })
          }
          if (formName === 'modifyStationForm') {
            // 当编辑的终端类型为便携站或机载站时,只有一个终端
            if (self.station.modifyStationForm.station_info.kind === 1 || self.station.modifyStationForm.station_info.kind === 4) {
              self.station.submitButtonLoading = true
              try {
                await self.$store.dispatch(`axios`, {
                  method: 'patch',
                  url: `/api/abs/devices/station_cu/${self.station.modifyStationForm.station_info.id}/`,
                  data: {
                    station_info: {
                      name: self.station.modifyStationForm.station_info.name,
                      kind: self.station.modifyStationForm.station_info.kind,
                      purpose: self.station.modifyStationForm.station_info.purpose
                    },
                    cu_info: [self.station.modifyStationForm.modifyCuForm]
                  }
                })
              } finally {
                self.station.submitButtonLoading = false
              }
              self.station.modifyStationVisible = false
              self.$message({
                message: self.$t('message.common.info.modifySuccess'),
                type: 'success'
              })
              await self.getDeviceTree()
              self.$nextTick(() => {
                self.handleMainCardDataUpdate()
              })
            }
            // 当编辑的终端类型为其他类型时,有多个终端
            if (self.station.modifyStationForm.station_info.kind !== 1 && self.station.modifyStationForm.station_info.kind !== 4 && self.station.modifyStationForm.station_info.kind !== 6) {
              self.station.submitButtonLoading = true
              try {
                await self.$store.dispatch(`axios`, {
                  method: 'patch',
                  url: `/api/abs/devices/stations/${self.station.modifyStationForm.station_info.id}/`,
                  data: {
                    name: self.station.modifyStationForm.station_info.name,
                    purpose: self.station.modifyStationForm.station_info.purpose,
                    version: self.station.modifyStationForm.station_info.version
                  }
                })
              } finally {
                self.station.submitButtonLoading = false
              }
              self.station.modifyStationVisible = false
              self.$message({
                message: self.$t('message.common.info.modifySuccess'),
                type: 'success'
              })
              await self.getDeviceTree()
              self.$nextTick(() => {
                self.handleMainCardDataUpdate()
              })
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
  #remote{
    height: 100%;
  }
  .node-card{
    cursor: pointer;
    border: solid 1px #fff;
    box-sizing: border-box;
  }
  .node-card-current{
    border: solid 1px #8fe0ff;
    box-shadow: 0 0 4px 4px rgba(143, 224, 255, 0.3);
  }
  .device-card-div{
    height: 100px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
  }
  .device-card-div-img{
    flex: 0 0 100px;
    height: 100px;
    background-color: #dfe3e4;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .device-card-div-img-img{
    width: 75px;
  }
  .device-card-div-content{
    flex: 1 1 70%;
    box-sizing: border-box;
    padding-left: 40px;
    text-align: left;
  }
  .device-card-div-button{
    height: 100%;
    flex: 0 0 25px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-between;
  }
</style>
